<template>
    <div v-for="item in Doctors" :key="item.doctor_id">
        <van-nav-bar style="background-color:#2894ff ;">
            <template #left>
                <div @click="onClickLeft" style="color: white;">
                    <van-icon name="arrow-left" size="18" color="#fff"></van-icon>
                    <span style="font-size: 18px;line-height: 20px;">{{item.department_name}}在线门诊</span>
                </div>
            </template>
        </van-nav-bar>
        <img style="height: 230px;display: block;width: 100%;object-fit: cover;" :src='item.department_bgpic'>
        <question></question>
        <div  style="margin: 10px 0;padding:0 10px;">
            <p style="padding: 20px 10px;font-weight:bolder; font-size: 18px;">科室关键词</p>
            <div style="margin-bottom: 15px;;margin: 6px 0 ;">
                <div style="display: flex;justify-content:center;color: #181818;font-weight: bolder;">
                    <van-button round size='normal' type="default"><span style="font-size: 13px;">湿疹</span></van-button>
                    <van-button round size="normal" type="default"><span style="font-size: 13px;">特应性皮炎</span></van-button>
                    <van-button round size="normal" type="default"><span style="font-size: 13px;">股癣</span></van-button>
                    <van-button round size="normal" type="default"><span style="font-size: 13px;">癫痕</span></van-button>
                    <van-button round size="normal" type="default"><span style="font-size: 13px;">灰指甲</span></van-button>
                </div>
                <div style="display: flex;justify-content:center;color: #181818;font-weight: bolder;">
                    <van-button round size="normal" type="default"><span style="font-size: 13px;">痤疮</span></van-button>
                    <van-button round size="normal" type="default"><span style="font-size: 13px;">皮肤过敏</span></van-button>
                    <van-button round size="normal" type="default"><span style="font-size: 13px;">牛皮癣</span></van-button>
                    <van-button round size="normal" type="default"><span style="font-size: 13px;">脱发</span></van-button>
                    <van-button round size="normal" type="default"><span style="font-size: 13px;">黄褐斑</span></van-button>
                </div>
            </div>
        </div>
        <div style="height: 10px;background-color: #e8f3f5;"></div>
        <div>
            <div>
                <p style="padding: 20px 20px;font-weight: bolder;font-size: 18px;">全部医生</p>
            </div>
            <!-- <hr> -->
            <!-- <div style="display: flex;justify-content: space-evenly;padding: 10px 0px;">
                <div>
                    <span>地区</span>
                    <i class="iconfont icon-icon_sanjiaoxing"></i>
                </div>
                <div>
                    <span>综合排序</span>
                    <i class="iconfont icon-icon_sanjiaoxing"></i>
                </div>
                <div>
                    <span>其他</span>
                    <i class="iconfont icon-icon_sanjiaoxing"></i>
                </div>
            </div> -->
            <list></list>
        </div>
        <p style="color: darkturquoise;padding: 20px 0;text-align: center;">点击加载更多</p>
    </div>
</template>

<script setup lang="ts">
import list from "../../components/list.vue";
import Doctor from '@/type/Doctor';
import { ref,onMounted,reactive } from 'vue';
import httpApi from '@/http'
import { useRouter,useRoute } from 'vue-router';
import question from '@/components/question.vue';
const value = ref('')
const Doctors = reactive<Doctor[]>([])
const navActive = ref('1')
const onClickLeft = () => history.back()
const route = useRoute()
const d_id = route.params.d_id
let words = reactive<any[]>([])
console.log(d_id);
onMounted(()=>{
    let params = { department_id:d_id }
    httpApi.DoctorApi.selectDoctorByType(params).then(res=>{
        // console.log(res.data.data);
        let a = res.data.data
        a.splice(0,a.length-1)
        console.log(a);
        Doctors.splice(0,Doctors.length,...a)
        console.log('21最后的结果', Doctors);
        console.log(Doctors);
    })
})

</script>

<style scoped>
p{
    margin: 0px;
}
</style>